<template>
	<uv-popup ref="popupRef" mode="bottom" :safe-area-inset-bottom="false" @mask-click="emits('update:modelValue', false)" round="32rpx">
		<view class="up_release py-25 px-30 pb-30">
			<view class="text-30 text-gray-80" style="text-align: center">选择阅读模式</view>
			<view class="flex-between mt-30">
				<view class="round-15" style="width: 326rpx;height: 180rpx;position: relative;background-color: #40d563" @tap="emits('choose-mode', 1)">
					<view class="release_type_tip" style="margin: auto 30rpx;height: fit-content">
						<view class="text-white text-32">阅读</view>
						<view class="text-24 text-white-60 mt-20">让知识触手可及</view>
					</view>
				</view>
				
				<view class="round-15" style="width: 326rpx;height: 180rpx;position: relative;background-color: #40d563" @tap="emits('choose-mode', 2)">
					<view class="release_type_tip" style="margin: auto 30rpx;height: fit-content">
						<view class="text-white text-32">AI 阅读</view>
						<view class="text-24 text-white-60 mt-20">探索知识的无限可能</view>
					</view>
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script setup lang="ts">
	
	import { ref, watch, nextTick } from "vue";
	
	
	/** props */
	const props = defineProps(['modelValue']);
	
	/** emits */
	const emits = defineEmits(['update:modelValue', 'choose-mode']);
	
	/** 弹窗实例 */
	const popupRef = ref<Record<string, any>>({});
	
	
	/** 监听父组件控制弹窗的状态 */
	watch(() => props.modelValue, show => {
		show ? nextTick(popupRef.value?.open) : popupRef.value?.close?.();
	});
	
	
</script>

<style scoped lang="scss">
	.release_type_tip{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
</style>